'use client';

import '@/app/styles/data-table.scss';
import DataTable, { DataTableColumn } from '@/components/table/DataTable';
import Sparkline from '../../../market/_components/Sparkline';
import { LendingHistoryRow } from '@/types/seibro';
import { formatShares, formatRatePercent } from '@/lib/utils/market';

function buildColumns(): DataTableColumn<LendingHistoryRow>[] {
	return [
		{
			key: 'stdDt',
			header: '기준일',
			align: 'left',
			priority: 'high',
			cell: (row) => row.stdDt
		},
		{
			key: 'lendingBalanceQty',
			header: '대차잔고',
			align: 'right',
			priority: 'high',
			cell: (row) => formatShares(row.lendingBalanceQty)
		},
		{
			key: 'matchedQty',
			header: '체결량',
			align: 'right',
			priority: 'medium',
			cell: (row) => formatShares(row.matchedQty)
		},
		{
			key: 'redeemedQty',
			header: '상환량',
			align: 'right',
			priority: 'low',
			cell: (row) => formatShares(row.redeemedQty)
		},
		{
			key: 'foreignLendRatio',
			header: '외국인 대여비율',
			align: 'right',
			priority: 'high',
			cell: (row) => formatRatePercent(row.foreignLendRatio)
		},
		{
			key: 'foreignBorrowRatio',
			header: '외국인 차입비율',
			align: 'right',
			priority: 'low',
			cell: (row) => formatRatePercent(row.foreignBorrowRatio)
		}
	];
}

interface Props {
	rows: LendingHistoryRow[];
}

// 대차 시계열 — 외국인 대여비율 추이(스파크라인, 오래된→최신) + 상세 테이블(최신순).
export default function StockLending({ rows }: Props)
{
	if (rows.length === 0) {
		return <p className='stock-detail__empty'>수집된 대차 시계열이 없습니다.</p>;
	}

	// rows 는 최신순 → 스파크라인은 오래된→최신 순서로 뒤집어 표시
	const trend = [...rows].reverse().map(c => c.foreignLendRatio);
	const latest = rows[0];

	return (
		<div className='stock-lending'>
			<div className='stock-lending__trend'>
				<div className='stock-lending__trend-head'>
					<span className='stock-lending__trend-label'>외국인 대여잔고비율 추이</span>
					<span className='stock-lending__trend-latest'>{formatRatePercent(latest.foreignLendRatio)}</span>
				</div>
				<Sparkline values={trend} label='외국인 대여잔고비율 추이' />
			</div>

			<DataTable<LendingHistoryRow>
				caption='대차 시계열 — 기준일, 대차잔고, 체결량, 상환량, 외국인 대여비율, 외국인 차입비율'
				columns={buildColumns()}
				rows={rows}
				rowKey={(row) => row.stdDt}
				emptyMessage='수집된 대차 시계열이 없습니다.'
			/>
		</div>
	);
}